<script setup lang="ts">
import {ref, watch} from 'vue'
import {NInput, NRadioGroup, NRadio, NSpace, NSwitch, NInputNumber, NFormItem} from 'naive-ui'
import {useTable} from '@/composables/useTable'
import {fetchLogPage} from "@/api/log"
import {
  ClickType,
  DEFAULT_MENU_MODEL,
  useFormRules,
  useColumns,
  useContextOptions
} from '@/views/manager/log/mock/useMenuConfig'
import BaseCrudPage from '@/components/page/BaseCrudPage.vue'
import BaseFormModal from '@/components/modal/BaseFormModal.vue'
import SearchForm from "@/views/manager/log/components/SearchForm.vue";

defineOptions({name: 'Log'})

// 状态管理
const optionType = ref<ClickType>(ClickType.NONE)
const showModal = ref(false)
const formValue = ref<Log.BaseInfo>({...DEFAULT_MENU_MODEL})

// 搜索参数
const searchParams = ref({
  name: '',
  title: '',
})

// 表格配置
const {
  dataRef,
  loading,
  pagination,
  tableConfig,
  handlePageChange,
  refresh,
  rowKey,
  reset,
} = useTable<Log.BaseInfo>({
  pageSize: 10,
  api: (params) => fetchLogPage({...params, ...searchParams.value}),
  immediate: true,
  minHeight: 560,
  maxHeight: 560,
  rowKey: (row: any) => row.operateId
})

// 处理点击事件
function handlerClick(type: ClickType, row: Log.BaseInfo) {
  optionType.value = type
  if (type === ClickType.DETAILS) {
    formValue.value = {...row}
    showModal.value = true
  }
}

const columns = useColumns(handlerClick)
const contextOptions = useContextOptions(handlerClick)
const rules = useFormRules()

// 处理表单提交
async function handleSubmit(model: Log.BaseInfo) {
  try {
    if (optionType.value === ClickType.DETAILS) {
    }
    showModal.value = false
    formValue.value = {...DEFAULT_MENU_MODEL}
    refresh()
  } catch (error) {
    window.$message?.error('操作失败：' + error)
  }
}


</script>

<template>
  <BaseCrudPage
    :loading="loading"
    :data="dataRef"
    :columns="columns"
    :pagination="pagination"
    :table-config="tableConfig"
    :context-menu-options="contextOptions"
    :row-key="rowKey"
    @update:page="handlePageChange"
  >
    <template #search>
      <SearchForm
        :on-search="refresh"
        :on-reset="reset"
      />
    </template>

    <template #modal>
      <BaseFormModal
        v-model:show="showModal"
        :title="'详情：'+formValue.status"
        :class="{'text-blue-500': formValue.status === 'SUCCESS'}"
        :model="formValue"
        :rules="rules"
        @submit="handleSubmit"
      >
        <n-form-item label="标题:" path="title">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.title" disabled/>
            </template>
            {{ formValue.title }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="业务类型:" path="businessType">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.businessType" disabled/>
            </template>
            {{ formValue.businessType }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="方法名称:" path="method">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.method" disabled/>
            </template>
            {{ formValue.method }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="请求方式:" path="requestMethod">
          <n-input v-model:value="formValue.requestMethod" disabled/>
        </n-form-item>
        <n-form-item label="操作人员的昵称:" path="operateName">
          <n-input v-model:value="formValue.operateName" disabled/>
        </n-form-item>
        <n-form-item label="请求URL:" path="operateUrl">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.operateUrl" disabled/>
            </template>
            {{ formValue.operateUrl }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="主机地址:" path="operateIp">
          <n-input v-model:value="formValue.operateIp" disabled/>
        </n-form-item>
        <n-form-item label="请求参数:" path="operateParam">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.operateParam" disabled/>
            </template>
            {{ formValue.operateParam }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="返回参数:" path="jsonResult">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.jsonResult" disabled/>
            </template>
            {{ formValue.jsonResult }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="错误消息:" path="errorMsg">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-input v-model:value="formValue.errorMsg" disabled/>
            </template>
            {{ formValue.errorMsg }}
          </n-tooltip>
        </n-form-item>
        <n-form-item label="操作时间:" path="operateTime">
          <n-input v-model:value="formValue.operateTime" disabled/>
        </n-form-item>
        <n-form-item label="耗时:" path="costTime">
          {{ formValue.costTime }}/{{ formValue.timeUnit }}
        </n-form-item>
      </BaseFormModal>
    </template>
  </BaseCrudPage>
</template>

<style scoped>
.container {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100%;
}

:deep(.n-data-table) {
  background-color: #fff;
  border-radius: 4px;
}

:deep(.n-card) {
  background-color: transparent;
  box-shadow: none;
}

:deep(.n-card-header) {
  padding: 0 0 16px 0;
}

:deep(.n-button:not(:last-child)) {
  margin-right: 12px;
}

:deep(.n-form-item-label) {
  font-weight: 500;
}
</style>
